/*
 * @Author: yuelei 
 * @Date: 2018-03-22 09:20:02 
 * @Last Modified by: Yuelei
 * @Last Modified time: 2018-03-22 10:59:24
 */


import React      from 'react';
import { Link }   from 'react-router-dom';
import MUtil from 'util/mm.jsx';
import User from 'service/user-service.jsx'

// 页面
import PageTitle  from 'component/page-title/index.jsx';

// 插件
import Pagination from 'util/pagination/index.jsx'


const _mm= new MUtil;
const _user=new User;

class UserList extends React.Component{
    constructor(props){
        super(props);
        this.state={
            list:[],
            pageNum:1,
            firstLoad:true
        }
    }
    componentDidMount(){
        this.loadUserList();
    }
    loadUserList(){
        _user.getUserList(this.state.pageNum).then((res)=>{
            // 利用回调先改变数据 然后将第一次加载变为false
            this.setState(res,()=>{
                this.setState({
                    firstLoad:false
                })
            })
        },(errMsg)=>{
            // 出错后list重置为空 让错误信息显示
            this.setState({
                list:[]
            });
            _mm.errorTips(errMsg)
        })
    }
    // 当页数变化时候
    onPageNumChange(pageNum){
        this.setState({
            pageNum:pageNum
        },()=>{
            // 利用回调函数进行重新加载
            console.log(this.state.pageNum);
            this.loadUserList();
        });
    }
    render(){

        let listBody=  this.state.list.map((user,index)=>{
            return (
            <tr key={index}>
                   <th>{user.id}</th>
                   <th>{user.username}</th>
                   <th>{user.email}</th>
                   <th>{user.phone}</th>
                 
                   <th>{new Date(user.createTime).toLocaleString()}</th>
                   </tr>);
        });
        let listError=(
            // 加载错误 判断是不是第一次加载 如果this.state.firstLoad存在 那就是在加载在数据，如果是this.state.firstLoad不存在 则已经加载过了 但没有找到
            <tr>
                <td colSpan="5" className="text-center">{this.state.firstLoad? '正在加载 请稍后。。':'没有找到结果'}</td>
            </tr>
        );
        let tableBody = this.state.list.length > 0 ? listBody :listError;
        
        return (
            <div id="page-wrapper">
            <PageTitle title="用户列表"/> 
              <div className="row">
                <div className="col-md-12">
                <table className="table table-striped taber-border">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>电话</th>
                        <th>注册时间</th>
                    </tr>
                </thead>
                <tbody>
                    {tableBody  }
                </tbody>
                </table>
                </div>
              </div>
              <Pagination  
             current={this.state.pageNum}
             total={this.state.total}
             onChange={(pageNum)=>this.onPageNumChange(pageNum)} />
            </div>
        );
    }
}
export default UserList